﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="inputCanvas" width="500" height="300" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasInput = document.getElementById("inputCanvas"); //绘图区域
        canvasInput.width = window.innerWidth;
        canvasInput.height = window.innerHeight;
        let paintInput = new FCPaint(); //绘图对象
        paintInput.canvas = canvasInput;
        scaleCanvas(paintInput);
        //判断主题色
        paintInput.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintInput.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasInput, paintInput);
        //判断移动端
        paintInput.isMobile = isMobileMode();
        if (paintInput.isMobile) {
            paintInput.scaleFactorX = 2.5;
            paintInput.scaleFactorY = 2.5;
        }

        //创建多页夹
        let inputDiv = new FCView();

        //初始化多页夹
        let initInput = function () {
            //添加到框架
            inputDiv.dock = "fill";
            addView(inputDiv, paintInput);
            //根据主题配色
            if (inputDiv.paint.defaultUIStyle == "dark") {
                inputDiv.backColor = "rgb(0,0,0)";
                inputDiv.borderColor = "rgb(100,100,100)";
                inputDiv.textColor = "rgb(255,255,255)";
            } else if (inputDiv.paint.defaultUIStyle == "light") {
                inputDiv.backColor = "rgb(255,255,255)";
                inputDiv.borderColor = "rgb(150,150,150)";
                inputDiv.textColor = "rgb(0,0,0)";
            }
            inputDiv.views = new Array();

            //创建文本框
            let textBox = new FCTextBox;
            //设置位置
            textBox.location = new FCPoint(50, 50);
            //设置大小
            textBox.size = new FCSize(100, 20);
            //设置字体
            textBox.font = "Default,12";
            //添加到父视图
            addViewToParent(textBox, inputDiv);
            //根据主题配色
            if (inputDiv.paint.defaultUIStyle == "dark") {
                textBox.backColor = "rgb(0,0,0)";
                textBox.borderColor = "rgb(255,255,255)";
                textBox.textColor = "rgb(255,255,255)";
            } else if (inputDiv.paint.defaultUIStyle == "light") {
                textBox.backColor = "rgb(255,255,255)";
                textBox.borderColor = "rgb(0,0,0)";
                textBox.textColor = "rgb(0,0,0)";
            }
            //创建DOM
            createInputTextBox(textBox);

            //创建下拉列表
            let comboBox = new FCTextBox;
            //添加到父视图
            addViewToParent(comboBox, inputDiv);
            //设置位置
            comboBox.location = new FCPoint(50, 150);
            //设置大小
            comboBox.size = new FCSize(100, 20);
            //设置字体
            comboBox.font = "Default,12";
            //根据主题配色
            if (inputDiv.paint.defaultUIStyle == "dark") {
                comboBox.backColor = "rgb(0,0,0)";
                comboBox.borderColor = "rgb(255,255,255)";
                comboBox.textColor = "rgb(255,255,255)";
            } else if (inputDiv.paint.defaultUIStyle == "light") {
                comboBox.backColor = "rgb(255,255,255)";
                comboBox.borderColor = "rgb(0,0,0)";
                comboBox.textColor = "rgb(0,0,0)";
            }
            //创建DOM
            createInputComboBox(comboBox);

            //定义下拉列表的项目
            let options = new Array();
            options.push("选项1");
            options.push("选项2");
            options.push("选项3");
            options.push("选项4");
            options.push("选项5");
            //循环添加项目
            for (let i = 0; i < options.length; i++) {
                let optionText = options[i];
                let option = document.createElement('option');
                option.text = optionText;
                option.label = optionText;
                comboBox.input.add(option, null);
            }

            //创建图片
            let image = new FCImage
            //根据主题配色
            if (inputDiv.paint.defaultUIStyle == "dark") {
                image.backColor = "rgb(0,0,0)";
                image.borderColor = "rgb(255,255,255)";
                image.textColor = "rgb(255,255,255)";
            } else if (inputDiv.paint.defaultUIStyle == "light") {
                image.backColor = "rgb(255,255,255)";
                image.borderColor = "rgb(0,0,0)";
                image.textColor = "rgb(0,0,0)";
            }
            //添加到父视图
            addViewToParent(image, inputDiv);
            //设置位置
            image.location = new FCPoint(50, 250);
            //设置大小
            image.size = new FCSize(100, 100);
            //设置地址
            image.src = "http://www.jjmfc.com/index_files/go.png";
            //创建DOM
            createInputImage(image);
        }
        
        initInput();

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasInput.width = document.documentElement.clientWidth;
            canvasInput.height = document.documentElement.clientHeight;
            scaleCanvas(paintInput);
            updateViewDefault(paintInput.views);
            invalidate(paintInput);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };
        updateViewDefault(paintInput.views);
        //刷新界面
        invalidate(paintInput);
    </script>
</body>
</html>
